// 功能五：计算总的商品价格
window.onload = function () {
    // 获取所有列表前面的checkbox
    let checkBoxs = document.querySelectorAll(".item-check-btn");
    checkBoxs.forEach(checkEle => {
        checkEle.isCheck = false;
        checkEle.onclick = function () {
            if (!checkEle.isCheck) {
                // checkEle.className += ' check';
                checkEle.classList.add("check");
            } else {
                // checkEle.className = 'item-check-btn'
                checkEle.classList.remove("check");
            }
            this.isCheck = !this.isCheck;
            isCheckAll();
            countTotal();  //重新计算总金额
        }
    })



    // 实现加和减的功能  ，通过事件委托
    let eles = document.querySelectorAll(".quentity");
    eles.forEach(ele => {
        ele.onclick = function (e) {
            var e = e || window.event;
            // console.log(e.target);
            // 把点击+ 和 -的事假委托给 外层容器quentity
            if (e.target.innerText === '-') {
                // console.log("点击了-号");
                let num = e.target.nextElementSibling.value;
                // console.log(num);
                if (num > 1) {
                    e.target.nextElementSibling.value = parseInt(e.target.nextElementSibling.value) - 1;
                }
            } else if (e.target.innerText === '+') {
                // console.log("点击了+号");
                let num = e.target.previousElementSibling.value;
                // console.log(num)
                e.target.previousElementSibling.value = parseInt(e.target.previousElementSibling.value) + 1;
            }

            // 计算每一条的总金额
            // 获取 单价 
            let priceEle = ele.parentNode.parentNode.parentNode.previousElementSibling.querySelector(".item-price");
            let price = parseInt(priceEle.innerText.substr(1));
            let num = ele.querySelector("input").value;
            // console.log(num);
            let total = price * num;
            let totalEle = ele.parentNode.parentNode.parentNode.nextElementSibling.querySelector(".item-price-total");
            // console.log(totalEle)
            totalEle.innerText = total;
            countTotal();
        }
    })



    // 删除商品的功能 
    // 获取所有的删除按钮
    let delEles = document.querySelectorAll(".item-edit-btn");
    // 获取遮罩层 
    let showModalEle = document.querySelector("#showModal");
    let showOverLayEle = document.querySelector("#showOverLay");

    let btnModalConfirmEle = document.querySelector("#btnModalConfirm");
    delEles.forEach(delEle => {
        delEle.onclick = function () {
            // console.log("点击了删除");
            // 点击删除的时候需要显示是否删除的对话框
            showModalEle.classList.add("md-show");
            showOverLayEle.classList.add("md-overlay");
            // 点击确定后的操作
            btnModalConfirmEle.onclick = function () {
                //  删除点击这一行的li
                // console.log(delEle);
                //    console.log(delEle.parentNode.parentNode.parentNode)
                delEle.parentNode.parentNode.parentNode.remove();
                showModalEle.classList.remove("md-show");
                showOverLayEle.classList.remove("md-overlay");
                countTotal();
            }
        }
    })


    // 是否删除对话框的一些操作
    // 点击取消
    document.querySelector("#btnModalCancel").onclick = function () {
        showModalEle.classList.remove("md-show");
        showOverLayEle.classList.remove("md-overlay");
    }
    document.querySelector(".md-close").onclick = function () {
        showModalEle.classList.remove("md-show");
        showOverLayEle.classList.remove("md-overlay");
    }



    // 全选或者取消全选功能
    // 获取全选的按钮
    // 点击全选选中所有
    let checkAll = document.querySelector(".item-all-check");
    checkAll.onclick = function () {
        checkBoxs.forEach(checkEle => {
            checkEle.isCheck = true;  //为后面勾选之后计算总数做打算
            checkEle.classList.add("check");
        })
        countTotal()
    }
    // 点击取消全选 不选中所有
    let cancelCheckEle = document.querySelector(".item-all-del");
    cancelCheckEle.onclick = function () {
        checkBoxs.forEach(checkEle => {
            checkEle.isCheck = false;  //为后面勾选之后计算总数做打算
            checkEle.classList.remove("check");
        })
        countTotal();
    }


    // 勾选之后 要全选或者不全选 
    // console.log(checkBoxs);
    // 一、是每个元素会有一个isCheck属性和勾选关联
    // 二、运用every来判断是否全选；
    function isCheckAll() {
        let arr = [...checkBoxs]
        arr.pop();
        // console.log(arr);
        let checkAll = arr.every(item => item.isCheck);
        // console.log(checkAll);
        if (checkAll) {
            // 全选了
            document.querySelector(".item-all-check .item-check-btn").classList.add("check");
        } else {
            // 不是全选
            document.querySelector(".item-all-check .item-check-btn").classList.remove("check");
        }
    }
    // isCheckAll();

    // 计算总金额的功能
    // 条件  需要被勾选  才会计算总金额
    function countTotal() {
        let lis = document.querySelectorAll(".cart-item-list li");
        let totalNum = 0;
        lis.forEach(li => {
            // 判断是否被勾选
            let ischeckEle = li.querySelector(".item-check-btn").isCheck;
            // 如果当前li的checkbox被勾选
            if (ischeckEle) {
                // 需要计算金额 
                let everyLiNum = parseInt(li.querySelector(".item-price-total").innerText);
                totalNum += everyLiNum;
            }
        })
        console.log(totalNum);
        document.querySelector(".total-price").innerText = totalNum + "元";
    }

}